---
layout: home
title: light7
---

<div class="docs-header">
  {% include masthead.html %}
  <div class="docs-header-content">
    <p class="docs-subtitle">A Light and Powerful UI Lib for build Mobile web app</p>
    <a data-ignore="push" href="https://github.com/lihongxun945/light7" class="btn btn-primary" onClick="">visit Github</a>
    <p class="version">V{{ site.version }}</p>
    <div class='git-buttons'>
      <iframe border="0" width="90" height="24" src="http://ghbtns.com/github-btn.html?user=lihongxun945&repo=light7&type=watch&count=true"></iframe>
      <iframe border="0" width="100" height="24" src="http://ghbtns.com/github-btn.html?user=lihongxun945&repo=light7&type=fork&count=true"></iframe>
      <a href="https://twitter.com/lihongxun945" class="twitter-follow-button" data-show-count="false">Follow @lihongxun945</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

    </div>
  </div>
</div>

<div class="index-content docs-content">
  <h2>Try Light7 Now!</h2>

  <p>Get light7 code with npm: <code>npm install light7</code>.</p>
  <p>It's more recommand to clone the source code on github - <a href="https://github.com/lihongxun945/light7" target="_blank">light7 on github</a> - and compile by yourself. You can also click <a href="https://github.com/lihongxun945/light7/archive/build.zip" target="_blank">Here to download a zip file</a>.</p>

  <p>All the compiled code is in the folder <code>dist</code>, now import the CSS and JS file like this: </p>

{% highlight html %}
<!-- in head -->
<link rel="stylesheet" href="dist/css/light7.min.css">

<!-- at the end of body -->
<script type='text/javascript' src='jquery.min.js' charset='utf-8'></script>
<script type='text/javascript' src='dist/js/light7.min.js' charset='utf-8'></script>
{% endhighlight %}

  <p>You can simple show an alert dialog with <code>$.alert</code>now:</p>
{% highlight js %}
$.alert("Hello Light7");
{% endhighlight %}


  <h2>Why Light7 ?</h2>

  <h3>Light and Powerful</h3>
  <p>It is only a UI lib, but not a framework. It provides 20+ useful components with only 82K JS and 117K CSS files. Most time you just copy component's HTML code and paste in your project, and It works!</p>
  <p>Light7 depend on <a href="http://jquery.com/" target="_blank">jQuery</a> or <a href='http://zeptojs.com/'>zeptojs</a>, nothing to learn if you have used Zepto/jQuery before.</p>

  <div class="section clearfix">
    <div class="round">
      <img src="http://gtms01.alicdn.com/tps/i1/TB1IFKdIFXXXXcmaXXXLIffVVXX-640-1136.png" alt="">
    </div>
    <h3>iOS Specific</h3>
    <p>Thanks to Framework7, Light7 can realize precisely pixel-perfect iOS native app's interface.</p>
  </div>

  <div class="section clearfix">
    <h3>powerful components</h3>
    <p>Light7 provide many powerful component such as Pull-to-refresh, Action Sheet and Notification.</p>
    <div class="components-img">
      <img width='320' src="/img/home/ptr.gif" alt="">
      <img width='320' src="/img/home/actions.gif" alt="">
      <img width='320' src="/img/home/noti.gif" alt="">
    </div>
  </div>

  <div class="section clearfix">
    <h3>themes</h3>
    <p>We have four different color themes, and a night theme， see <a href="/components/#themes" target="_blank">themes</a>。</p>
  </div>

</div>

{% include footer.html %}
